<template>
  <el-dialog
    :title="'批量操作'+title"
    :visible.sync="dialogVisble"
    v-dialog-drag
    :close-on-click-modal="false"
    @close="restForm"
    width="800px"
  >
    <div style="display: flex;justify-content: space-between">
      <el-input size="medium" placeholder="请输入内容" v-model="uploadValue" style="width: 80%">
        <template slot="append">
          <el-button size="medium" @click="handleUploadWorks" v-repeatClick>选择文件..</el-button>
          <el-upload
            ref="upload"
            class="upload-demo"
            action="#"
            accept=".xlsx"
            :limit="1"
            style="display: none"
            id="upload"
            name='upload'
            :http-request="handleOnChange"
          >
            <el-button size="medium" v-repeatClick></el-button>
          </el-upload>
        </template>
      </el-input>
      <el-button size="medium" type="primary" v-repeatClick @click="getSelfGoodsTemplate">模板文件下载</el-button>
    </div>
    <div style="border: 1px solid #ccc;height:400px;margin-top: 20px;border-radius: 5px;overflow: auto">
      <div style="padding: 5px 5px 0 10px" v-for="(item,i) in uploadData">{{item}}</div>
    </div>
  </el-dialog>
</template>

<script>
import messageOnce from '../../../utils/messageOnce'
export default {
  name: 'uploadExcel',
  props:['visible','uploadFun','downFun','title'],
  data(){
    return {
      uploadValue:'',
      uploadData:[],
      dialogVisble:false
    }
  },
  methods:{
    restForm(){
      this.uploadData = []
      this.uploadValue = ''
      this.$emit('update:visible',false)
    },
    //点击上传按钮
    handleUploadWorks(){
      document.querySelectorAll("#upload button")[0].click()
    },
    //上传
    handleOnChange(file,files){
      if(!sessionStorage.storeId){
        this.emptyStoreTip()
        return
      }
      this.uploadData = ["文件正在上传.."]
      let form = new FormData()
      form.append('goodsExcel',file.file)
      this.uploadFun(form).then(resp=>{
        this.uploadValue = file.file.name
        this.uploadData.push("文件上传完毕",resp.msg,"批量操作完毕！")
      }).catch(e=>{
        this.uploadValue = ''
        this.uploadData.push("文件上传失败","批量操作完毕！")
      })
    },
    //下载模板
    getSelfGoodsTemplate() {
      this.download(this.downFun())
    },
  },
  watch:{
    visible(){
      this.dialogVisble = this.visible
    }
  }
}
</script>

<style scoped>

</style>
